<template>
  <div class="login-container">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="login-box">
      <div class="login-header">
        <h1>系统登录</h1>
        <p>欢迎回来，请登录您的账号</p>
      </div>

      <a-form :model="loginForm" @finish="handleSubmit" class="login-form">
        <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名' }]">
          <a-input v-model:value="loginForm.username" size="large" placeholder="用户名">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
          <a-input-password v-model:value="loginForm.password" size="large" placeholder="密码">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-checkbox v-model:checked="loginForm.remember"> 记住密码 </a-checkbox>
            </a-col>
            <a-col :span="12" class="text-right">
              <a class="forgot-link">忘记密码？</a>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" size="large" :loading="loading" block>
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const loading = ref(false);

const loginForm = reactive({
  username: '',
  password: '',
  remember: false,
});

// 从 localStorage 获取存储的登录信息
const getStoredLoginInfo = () => {
  const storedInfo = localStorage.getItem('loginInfo');
  if (storedInfo) {
    const { username, password, remember } = JSON.parse(storedInfo);
    loginForm.username = username;
    loginForm.password = password;
    loginForm.remember = remember;
  }
};

// 保存登录信息到 localStorage
const saveLoginInfo = () => {
  if (loginForm.remember) {
    localStorage.setItem(
      'loginInfo',
      JSON.stringify({
        username: loginForm.username,
        password: loginForm.password,
        remember: true,
      }),
    );
  } else {
    localStorage.removeItem('loginInfo');
  }
};

const handleSubmit = async (values: any) => {
  try {
    loading.value = true;
    // 这里添加登录逻辑
    console.log('登录表单数据:', values);

    // 模拟登录成功
    await new Promise((resolve) => setTimeout(resolve, 1000));

    // 处理记住密码
    saveLoginInfo();

    message.success('登录成功');
    router.push('/');
  } catch (error) {
    message.error('登录失败，请重试');
  } finally {
    loading.value = false;
  }
};

// 页面加载时检查是否有存储的登录信息
onMounted(() => {
  getStoredLoginInfo();
});
</script>

<style lang="less" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 55%;
    height: 100vh;
    top: 0;
  }

  //   &::before {
  //     left: -5%;
  //     background: #1890ff;
  //     transform: skewX(15deg);
  //   }

  //   &::after {
  //     right: -5%;
  //     background: #722ed1;
  //     transform: skewX(15deg);
  //   }

  .login-box {
    width: 400px;
    padding: 40px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

    .login-header {
      text-align: center;
      margin-bottom: 40px;

      h1 {
        font-size: 28px;
        background: linear-gradient(45deg, #1890ff, #722ed1);
        -webkit-background-clip: text;
        color: transparent;
        margin-bottom: 8px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      p {
        color: rgba(255, 255, 255, 0.85);
        font-size: 14px;
      }
    }
  }

  .login-form {
    .ant-input-affix-wrapper {
      background: rgba(255, 255, 255, 0.8) !important;
      border: 1px solid rgba(255, 255, 255, 0.5) !important;

      &:hover,
      &:focus {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: #1890ff !important;
      }
    }

    .ant-input {
      background: transparent !important;
    }

    .site-form-item-icon {
      color: rgba(0, 0, 0, 0.45);
    }

    .forgot-link {
      color: rgba(0, 0, 0, 0.85);
      transition: all 0.3s ease;

      &:hover {
        color: #1890ff;
        text-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
      }
    }

    .ant-btn {
      background: linear-gradient(45deg, #1890ff, #722ed1);
      border: none;
      height: 44px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
      }

      &:active {
        transform: translateY(1px);
      }
    }

    .ant-checkbox-wrapper {
      color: rgba(0, 0, 0, 0.85);
    }
  }

  .text-right {
    text-align: right;
  }

  // 添加装饰性圆形
  .circle {
    position: absolute;
    border-radius: 50%;
    z-index: 0;

    &.circle-1 {
      width: 200px;
      height: 200px;
      background: rgba(24, 144, 255, 0.1);
      top: 10%;
      left: 15%;
    }

    &.circle-2 {
      width: 300px;
      height: 300px;
      background: rgba(114, 46, 209, 0.1);
      bottom: 10%;
      right: 15%;
    }
  }
}

// 响应式适配
@media screen and (max-width: 576px) {
  .login-container {
    &::before,
    &::after {
      width: 100%;
      transform: skewX(0);
    }

    &::before {
      height: 50vh;
      top: 0;
      left: 0;
    }

    &::after {
      height: 50vh;
      bottom: 0;
      top: auto;
      right: 0;
    }
  }

  .login-box {
    width: 90% !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
  }

  .circle {
    display: none;
  }
}
</style>
<style lang="less">
.login-container {
  .ant-input {
    background-color: transparent;
  }
}
</style>
